<!DOCTYPE html>
<head>
    <title>我的第六个vue程序</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
</head>
<body>
    <h1>表单输入绑定</h1>
    <div id="d1">
    <p> 单行文本</p>
    <input  v-model="message" placeholder="hell vue">
    <p>message is:{{message}}</p>
    </div>
    <br/>

    <div id="d2">
    <p> 多行文本</p>
    <span>多行文本是</span>
    <P style="white-space: pre-line;">{{message}}</P>
    <textarea v-model="message" placeholder="添加多行文本"></textarea>
    </div>
    <br/>

    <div id="d3">
    <p> 复选框</p>
        <input type="checkbox" id="checkbox1" v-model="checked">
        <label for="checkbox">{{checked }}</label>

    <br>
    <p> 多个复选框</p>
    <p>v-model可以绑定多个值</p>
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="john" v-model="checkedNames">
    <label for="john">john</label>
    <input type="checkbox" id="mike" value="mike" v-model="checkedNames">
    <label for="mike">mike</label>
    <br>
    <span>checked names:{{checkedNames}}</span>

    </div>
    <br/>



    <div id="d4">
        <p>单选按钮</p>
        <input type="radio" id="one" value="one" v-model="picked">
        <label for="one">one</label>
        <br>
        <input type="radio" id="two" value="two" v-model="picked">
        <label for="two">two</label>
        <br>
        <span>picked:{{picked}}</span>
    </div>
    <br/>
    

    <div id="d5">
        <p>选择框</p>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected:{{selected}}</span>
    </div>
    <br/>




    <div id="d6">
        <p>选择框</p>
        <select v-model="selected" multiple style="width:50px">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected:{{selected}}</span>
    </div>
    <br/>


    <div id="d7">
        <p>选择框</p>
        <select v-model="selected">
            <option v-for="item in options" v-bind:value="item.value">
                {{item.text}}
            </option>
        </select>
        <span>selected:{{selected}}</span>
    </div>
    <br/>


    
    <div id="d8">
        <p>值绑定</p>
        <!-- 当选中时，`picked` 为字符串 "a" -->
        <input type="radio" v-model="picked" value="a">


        <!-- `toggle` 为 true 或 false -->
        <input type="checkbox" v-model="toggle">


        <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
        <select v-model="selected">
            <option value="abc">ABC</option>
        </select>

    </div>
    <br/>



    <div id="d9">
        <p>复选框</p>
        <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

        <!-- // 当选中时vm.pick === vm.a -->
        <input type="radio" v-model="pick" v-bind:value="a">

        <select v-model="selected">
            <!-- 内联对象字面量 -->
          <option v-bind:value="{ number: 123 }">123</option>
        </select>
    </div>
    <br/>





    <div id="d10">
        <!--在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步-->
        <p>修饰符</p>
        <input v-model.lazy="msg">
        <!--如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：-->
        <input v-model.number="age" type="number">
        <!-- 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： -->
        <input v-model.trim="msg">
    </div>
    <br/>



</body>
<script>
    //就算不用的vue变量，也需要初始化
    //单行文本
    var vm1 = new Vue({
        el:"#d1",
        data:{
            message:""
        }
    })
    //多行文本
    var vm2 = new Vue({
        el:"#d2",
        data:{
            message:""
        }
    })

    //复选框
    var vm3 = new Vue({
    el:"#d3",
    data:{
        checked:"",
        checkedNames:[]
    }
    })

    //单选框
    var vm4 = new Vue({
    el:"#d4",
    data:{
        picked:"",
    }
    })


    
    //选择框
    var vm5 = new Vue({
    el:"#d5",
    data:{
        selected:"",
    }
    })

  //选择框,selected 需要初始化未一个数组
  var vm6 = new Vue({
    el:"#d6",
    data:{
        selected:[],
    }
    })
    var vm7 = new Vue({
    el:"#d7",
    data:{
        selected:"A",
       options:[
        {id:1,value:1,text:"A"},
        {id:2,value:2,text:"B"},
        {id:3,value:3,text:"C"},
        {id:4,value:4,text:"D"}
       ]
    }
    })

    //值绑定
    var vm8 = new Vue({
    el:"#d8",
    data:{
        selected:"",
        toggle:"",
        picked:""
    }
    })
    /*console.log只能跑一次，虽然v-model可以绑定值，当绑定的值变化时，我如何拿到绑定的值，原生js
    * 倒是有一个$('#id').on('click',{}) 类似的方法，vue.js是用v-model来代替的，如何拿到这个v-model的值
    */
    console.log('selected = ' +vm8.selected)
    console.log('toggle = ' +vm8.toggle)
    console.log('picked = ' +vm8.picked)

    //复选框
    /**    // 当选中时
        vm.toggle === 'yes'
        // 当没有选中时
        vm.toggle === 'no
    */
    var vm9 = new Vue({
    el:"#d9",
    data:{
        toggle:"",
        pick:"",
        selected:"",
        number: 100,
        a:20
    }   
    })


    var vm10 = new Vue({
    el:"#d10",
    data:{
        msg:"",
        age:""
    }   
    })








</script>
</html>